<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js Data</title>
    <script src="static/js/vue.3.4.30.js"></script>
    <script src="static/js/vue-router.4.4.0.js"></script>
    <link rel="stylesheet" href="static/css/style.css">
</head>

<body>
    <h3>Vue.js Router</h3>
    <div id="app">
        <p>
            <strong>Current route path:</strong> {{ $route.fullPath }}
        </p>
        <nav>
            <router-link to="/">Home</router-link> |
            <router-link to="/about">About</router-link> |
            <router-link :to="{name:'blog', params:{id:832787872648}}">Blog</router-link> | 
            <router-link :to="{name:'comments', query:{limit:3, page:20}}">Comments</router-link>
        </nav>
        <main>
            <router-view></router-view>
        </main>
    </div>
    <script>
        // 定义模板
        const home = {
            template: '<div>This is Home Page!</div>'
        }

        const about = {
            template: '<div>About us!</div>'
        }

        const blog = {
            template: '<div>Blog ID {{ this.$route.params.id }}</div>'
        }

        const comment = {
            template: '<div>Comments List: <br><span style="float:right;">{{ page }}</span></div>',
            computed: {
                page() {
                    return `[第 ${this.$route.query.limit} 页] [${this.$route.query.page}/页]`
                }
            }
        }

        // 定义路由配置
        const routes = [{
            path: '/',
            name: 'home',
            component: home
        }, {
            path: '/about',
            name: 'about',
            component: about
        }, {
            path: '/blog/:id',
            name: 'blog',
            component: blog
        }, {
            path: '/comments',
            name: 'comments',
            component: comment
        }
        ]

        // 创建 Router 实例
        const router = VueRouter.createRouter({
            history: VueRouter.createMemoryHistory(),
            routes
        })

        Vue.createApp().use(router).mount('#app')
    </script>
</body>

</html>
